<template>
  <van-nav-bar
    title="购物车"
    left-text="返回"
    left-arrow
    @click-left="
      () => {
        $router.push('/');
      }
    "
  />

  <van-empty
    v-if="!usercarts.length"
    image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
    image-size="80"
    description="购物车空"
  />
  <div v-else>
    <van-swipe-cell v-for="item in usercarts">
      <van-card :num='item.number' :price="item.goods.goods_price" :title="item.goods.goods_name">
        <template #thumb>
          <van-checkbox v-model="item.checked"></van-checkbox>
          <van-image
            width="100"
            height="100"
            :src="item.goods.goods_big_logo"
          />
        </template>
        <template #num>
          <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
        </template>
      </van-card>
      <template #right>
        <van-button
          square
          text="删除"
          @click="delCart(item.id)"
          type="danger"
          class="delete-button"
          style="height: 100%"
        />
      </template>
    </van-swipe-cell>
  </div>

  <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="allchecked">全选</van-checkbox>
</van-submit-bar>

</template>

<script setup>
import { computed, ref } from "vue";
import { useCounterStore } from "@/store/cart";
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore();

//自定义购物车数据
let usercarts = ref([]);
const cartData = () => {
  let username = localStorage.getItem("username");
  usercarts.value = store.carts.filter((item) => item.username == username);
  console.log(usercarts.value);
};
cartData();

//删除
const delCart=(id)=>{
  store.delCart(id)
  cartData()
}

//全选
const allchecked=computed({
  get(){
    if(usercarts.value.length==0){
      return false
    }
    else{
      return usercarts.value.every(item=>item.checked)
    }
  },
  set(val){
    usercarts.value.forEach(item=>item.checked=val)
  }
})

//计算总价
const allprice=computed(()=>{
  let allprice=0
  //自定义一个选中数据
  let cartok=usercarts.value.filter(item=>item.checked)
  cartok.forEach(item=>{
    allprice+=item.number*item.goods.goods_price
  })
  return allprice*100
})


//提交订单
import {orderApi} from '@/api/api'
import { showToast } from 'vant';
import { useRouter } from "vue-router";
let router=new useRouter()

const onSubmit=()=>{
  //点击时，有无数据
  //自定义数据
  let ordercartok=usercarts.value.filter(item=>item.checked)
  if(!ordercartok.length){
    showToast({
      type:'fail',
      message:'请选择要提交的商品',
      duration:2000,
    })
    return
  }else{
    let ordercartok=usercarts.value.filter(item=>item.checked)
    console.log('生成订单数据',ordercartok)
    orderApi({
      goodsIds:ordercartok.map(item=>item.goods.goods_id).join(','),
      username:localStorage.getItem('username'),
      product_code:ordercartok[0].goods.goods_name+'等'+ordercartok.length+'件商品',
      totalPrice:allprice.value,
      nums:ordercartok.map(item=>item.number).join(',')
    }).then((res)=>{
      console.log('生成订单',res)
      if(res.data.code==0){
        showToast({
          type:'success',
          message:'生成订单成功',
          duration:2000,
          onClose(){
            router.push('/order/'+res.data.data.orderId)
          }
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped></style>
